<template>
	<!-- 积分商城 overflow: hidden;-->
	<view style="background-color: #F5F5F5;">
		<!-- 顶部积分区域 -->
		<view class="d-flex-yCenter-ju "
			style="background-color: #FFFFFF;position: fixed;top: 0;left: 0;z-index: 99;width: 100%;">
			<view class="shoop_top" style=" ">
				<view class="shoop_top_title d-flex-ybetween textColor-white">
					<view class="">
						我的积分
					</view>
					<view class="d-flex-yCenter-ju ">
						<view class="" style="margin-right: 32rpx;"
							@click="mydingd('../Integral-details/Integral-details')">
							积分明细
						</view>
						<view class="border_line" style="margin-right: 30rpx;">
						</view>
						<view class="" @click="mydingd('../my-order/my-order')">
							我的订单
						</view>
					</view>
				</view>
				<view class="textColor-white">
					{{userinfo.integral}}
				</view>
			</view>
		</view>
		<!-- height: 1070rpx; top: 117px;-->
		<view class="bg_ff w-100"
			style=" background-color: #FFFFFF;border-radius: 12px 12px 0px 0px; position: relative;   ">
			<!-- tab切换 -->
			<view class="d-flex-yCenter-ju w-100"
				style="margin:194rpx 0rpx 42rpx; position: fixed;   background-color: #FFFFFF;z-index: 99;">
				<view class="w-50 d-flex-yCenter-ju" v-for="(item,index) in tab" :key="index" style="height: 100rpx;"
					:class="activetab == index ? 'activecolor' : 'notcolor'" @click="active(index)">
					{{item.name}}
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="" v-if="activetab==0" style="position: absolute;top: 294rpx;width: 100%">
				<x-shoopCard :list="shoopCard" @popu="popu"></x-shoopCard>
				<view class="py-30 text-al-center d-flex-yCenter-ju">
					<u-loadmore icon :load-text='loadText' :status="status" @loadmore="addRandomData(0)"></u-loadmore>
				</view>
			</view>
			<view class="" v-if="activetab==1" :style="'height:'+scrollH+'px;'"
				style="position: absolute;top: 294rpx;width: 100%;">
				<view class="" style="margin: 30rpx 30rpx 0rpx; ">
					<view class="d-flex-yCenter-sb flex-w">
						<view class="box-shadow" v-for="(item,index) in shoopCardList" :key="index"
							style="width: 330rpx; border-radius: 6px;margin-bottom: 30rpx;">
							<view class="">
								<image :src="item.logo" mode="widthFix" style="width: 100%;height: 242rpx;"
									:lazy-load="true">
								</image>
							</view>
							<view class="" style="padding: 20rpx 18rpx 30rpx 20rpx; ">
								<view class=""
									style="font-size: 28rpx;color: #000000; font-weight: bold;margin-bottom: 20rpx;">
									{{item.title.length >=14 ?  item.title.substring(0,14) + '...' : item.title}}
								</view>
								<view class="" style="color: #FF9703;margin-bottom: 20rpx;">
									{{item.integral}}积分+￥{{item.price_selling}}
								</view>
								<view class="d-flex jfy-end" style="width: 100%;" @click="gotoduih(item.id)">
									<view class="d-flex-yCenter-ju"
										style="width: 120rpx;height: 50rpx;background: #FF9703;border-radius: 12rpx;font-size: 13px;color: #FFFFFF;">
										立即兑换
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="py-30 text-al-center  d-flex-yCenter-ju">
					<u-loadmore icon :load-text='loadText' :status="status" @loadmore="addRandomData(1)"></u-loadmore>
				</view>
				<!-- </scroll-view> -->
			</view>
		</view>
		<!-- 底部弹窗 -->
		<u-popup v-model="show" mode="bottom" length="55%" :closeable="true" :mask-close-able="false">
			<view class="" style="position: fixed;">
				<view style="margin: 104rpx 0rpx 34rpx;">
					<x-shoopCard fs="28px 24px 28px 52px;" :list="popupList" :convert="false"></x-shoopCard>
				</view>
				<view class="" style="margin: 0rpx 30rpx;">
					<view class="">
						兑换优惠券
					</view>
					<view class="textColor999" style="margin: 30rpx 0rpx 20rpx;font-size: 24rpx;">
						兑换成功后，您可在【我的】>【我的卡券】中查看优惠券
					</view>
					<view class="textColor999" style="font-size: 24rpx;">
						确认兑换后，我们将从你的账户中扣除{{popupList[0].integral}}积分
					</view>
					<view class="" style="margin: 60rpx 30rpx 48rpx;border-radius: 6px;">
						<x-button @btnClick="btnClick" title="立即兑换"></x-button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		goodslst,
		integralcouponlst,
		http_user_integral_coupon_order_create
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				page: 1, //页数 
				limit: 10,
				total: '', //当前页数的总条数
				loadText: {
					loadmore: '点击获取下一页数据',
					loading: '努力加载中',
					nomore: '哦豁！着 没有更多数据了'
				},
				status: 'loadmore', //status 
				show: false,
				activetab: 0, //默认选择tab0位置选中
				popupList: [],
				scrollH: '',
				tab: [{
					name: '兑换优惠券'
				}, {
					name: '兑换商品'
				}],
				// 兑换商品
				shoopCardList: [],
				// 积分卡券订单列表
				shoopCard: [],
				// 兑换优惠券需要扣除的积分
				// shoopCard: [{
				// 	id: 1,
				// 	leftprice: '30',
				// 	lefttext: '优惠券',
				// 	centertitle: '满100元可使用',
				// 	centertitle2: '兑换后15天内有效',
				// 	rightnum: '2000积分',
				// 	rightbutton: '立即兑换'
				// }, {
				// 	id: 2,
				// 	leftprice: '30',
				// 	lefttext: '优惠券',
				// 	centertitle: '满100元可使用',
				// 	centertitle2: '兑换后15天内有效',
				// 	rightnum: '2000积分',
				// 	rightbutton: '立即兑换'
				// }]
			}
		},

		computed: {
			...mapGetters(['userinfo'])
		},
		onShow() {
			this.shoopCard = [],
				this.integralcouponlsts()
			console.log('shouye')
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.scrollH = res.screenHeight - uni.upx2px(147); //147 164 
					console.log(this.scrollH);
				}
			});

		},
		methods: {
			// 立即兑换
			gotoduih(id) {
				uni.navigateTo({
					url: '../shoopDetail/shoopDetail?cid=' + id
				})
			},
			// 请求下一页数据	
			addRandomData(index) {
				this.page++;
				// if (this.total != this.limit) { 
				// total总数
				if (index == 1) {
					// 积分商品列表
					if (this.total == 0 || this.total == this.shoopCardList.length) {
						this.status = 'nomore'; //，没有更多数据了
						return;
					} else {
						this.status = 'loading'; //， 
						this.goodslist()
					}
				} else {
					if (this.total == 0 || this.total == this.shoopCard.length) {
						this.status = 'nomore'; //，没有更多数据了
						return;
					} else {
						this.status = 'loading'; //， 
						// 积分卡券订单列表
						this.integralcouponlsts()
					}

				}
			},
			// 积分卡券订单列表
			integralcouponlsts() {
				integralcouponlst({
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.status = 'loadmore';
					this.total = res.data.total;
					this.shoopCard.push(...res.data.data);
					console.log(res, '积分卡券订单列表')
				})
			},
			// 积分商品列表
			goodslist() {
				goodslst({
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.status = 'loadmore';
					this.total = res.data.total;
					this.shoopCardList.push(...res.data.data);
					console.log(res, '积分商品列表')
				})
			},
			active(index) {
				this.page = 1;
				this.activetab = index;
				this.status = 'loadmore';
				this.total = 0;
				if (index == 1) {
					// 积分商品列表
					this.shoopCardList = [];
					this.goodslist()
				} else {
					// 积分卡券订单列表
					this.shoopCard = [];
					this.integralcouponlsts()
				}
			},
			popu(index) {
				console.log(index, 'index')
				this.show = true;
				// 并且点击的第几个显示第几个内容
				this.popupList = [];
				this.popupList.push(this.shoopCard[index])
				console.log(this.popupList)
			},
			// 目前是直接跳转到收获地址的界面的
			btnClick() {
				http_user_integral_coupon_order_create({
					id: this.popupList[0].ic_id
				}).then(res => {
					this.integralPay(res.data.pay_log_id)
					this.show = false;
				})
			},
			// 积分支付
			integralPay(pay_log_id) {
				// uni.navigateTo({
				// 	url: '../../myCardManagement/CardManagement/CardManagement?current=1&status=1'
				// })
				this.PointsPayment({
					data: {
						pay_log_id
					},
					success: (res) => {
						this.$tool.showToast('兑换成功', true)
						setTimeout(() => {
							uni.navigateTo({
								url: '../../myCardManagement/CardManagement/CardManagement?current=1&status=1'
							})
						}, 1000)
					},
					fail: (err) => {
						uni.showToast({
							title: err.msg,
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			// 我的订单
			mydingd(e) {
				uni.navigateTo({
					url: e
				})
			}
		}
	}
</script>

<style lang="scss">
	.shoop_top {
		position: relative;
		z-index: 999;
		// width: 702rpx;
		width: 712rpx;
		height: 194rpx;
		// margin: 24rpx 20rpx 0rpx;
		padding: 24rpx 20rpx 0rpx;
		background: url(../static/yellowbg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		padding: 26rpx 40rpx 0rpx 26rpx;

		.shoop_top_title {
			margin-bottom: 30rpx;

			.border_line {
				width: 6rpx;
				height: 30rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
			}
		}
	}

	.activecolor {
		font-weight: 500;
		color: #FF9703;
		border-bottom: 4rpx solid #FF9703;
	}

	.notcolor {
		font-weight: 500;
		color: #000000;
	}

	.shoop_card_box {
		padding: 0rpx 24rpx;

		.shoop_card {
			height: 172rpx;
			background: url(../static/shoop_card.png);
			background-size: 100%;
			background-repeat: no-repeat;
			margin-bottom: 26rpx;
		}
	}
</style>
